<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>to do list</title>
</head>
<body>
<div id="app">
    <h3>TODO List</h3>
    <!--@remove 监听自定义事件 remove -->
    <to-do v-for="l in list" v-bind:content="l" @remove="done"></to-do>
    <add-list @add="push"></add-list>
    <my-button @cli="say"></my-button>
</div>
<script src="../../js/vue.js"></script>
<script>
    const ToDo = {
        props: ['content'],
        template: `
          <div>
            <span>{{ content }}</span>
            <button @click="remove">Remove</button>
          </div>
        `,
        methods: {
            remove() {
                this.$emit('remove', this.content)
            }
        }
    }
    const AddList = {
        template: `
            <div>
                <input v-model="todo" /> <button @click="add">Add</button>
            </div>
        `,
        data() {
            return {
                todo: ''
            }
        },
        methods: {
            add() {
                // TODO 将 todo 新增的内容添加到父组件的数组中
                console.log("add" + this.todo)
                this.$emit('add', this.todo)
                this.todo = ''
            }
        },

    }
    const MyButton = {
        template: `
            <button @click='cli'>浅点一下</button>
        `,
        methods: {
            cli() {
                console.log("cli")
                // 自定义事件 父组件使用当前子组件时 可以监听该自定义事件
                this.$emit('cli')
            }
        }
    }
    Vue.createApp({
        data() {
            return {
                list: ['上课', '吃饭', '投简历', '做项目']
            }
        },
        methods: {
            say() {
                console.log("hello")
            },
            done(c) {
                this.list = this.list.filter(item => item !== c)
            },
            push(c) {
                this.list.push(c)
            }
        },
        components: {
            ToDo,
            AddList,
            MyButton
        }
    }).mount("#app")
</script>
</body>
</html>